<template>
    <div class="add">
       
        <add-survey ref="month" :date="date" :year="year" ></add-survey>
        <add-calendar ref="survey" @changeDetail="changeDetail" @slide="swiperSlide" @update="updateSurveyDay"></add-calendar>
        <add-detail ref="detail"></add-detail>
        <add-button @toToday="toToday"></add-button>
        
    </div>
    
</template>

<script>
import AddSurvey from './component/Survey'
import AddCalendar from './component/Calendar'
import AddDetail from './component/Detail'
import AddButton from './component/Button'

import util from '@/util/util'

export default {
    name: "Add",
    components: {
        AddSurvey,
        AddCalendar,
        AddDetail,
        AddButton
    },
    data () {
        return {
            date: "",
            year: 2018,
        }
    },
    methods: {
        changeDetail (date) {
            this.$refs.detail.changeDetail(date);
        },
        toToday () {
            this.$refs.survey.toToday();
            this.$refs.survey.updateDetailToday();
            this.$refs.month.toToday();
            this.date = "今天";
        },
        updateSurveyDay (year, month, day) {             //更新组件 Survey 的天数
            //是否为今天，更新顶部多少天后
            let date = new Date();
            let nowYear = date.getFullYear();
            let nowMonth = date.getMonth() + 1;
            let nowDay = date.getDate();
            let data_date,
                data_year;
            if (nowYear === year && nowMonth === month && nowDay === day) {
                data_date = "今天";
                data_year = year;
            } else {
                var dayNum = Math.ceil(
                    ( new Date(year, month, day).getTime() - new Date(nowYear, nowMonth, nowDay).getTime() ) 
                    /1000
                    /60
                    /60
                    /24
                );
                if (dayNum > 0) {
                    dayNum = dayNum + "天后";
                } else {
                    dayNum = Math.abs(dayNum) + "天前";
                }
                data_date = dayNum;
                data_year = year;
            }
            this.year = data_year;
            this.date = data_date;
        },
        swiperSlide (direction) {
            
            this.$refs.month.slide(direction);
        },
        initSurvey () {
                var date = new Date();
                var year = date.getFullYear();
                var day = '今天';
                this.date = day ;
                this.year = year;
        }
    },
    mounted () {            
        //验证成功
        var _this = this;
        util.checkLogin().then( function () {
            _this.initSurvey();
        }, function () {
        //验证失败重置界面到登录界面
            _this.$router.replace({
                path: '/login'
            })

        });                
        
    }
}
</script>

<style lang="stylus" scoped>
    .add
        width 100%
        height 100%
        position absolute
        top 0
        display flex
        flex-direction column
        align-items center
        background whitesmoke
</style>


